<template>
    <div class="layout">
        <Modal
                :mask-closable="false"
                v-model="showLogin"
                title="登录">
            <Form :model="form" ref="form" :rules="rules" label-position="left" :label-width="100">
                <FormItem label="用户名" prop="name">
                    <Input v-model="form.name" placeholder="your name"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="form.password" type="password" placeholder="password" password></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="submit('form')" type="primary">登录</Button>
                <Button @click="showLogin = false">关闭</Button>
            </div>
        </Modal>
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" @on-select="getSelect">
                    <router-link to="/" style="color: white; font-size: large" v-if="isMo">静心尽力写生活</router-link>
                    <span style="right: 0;position: absolute;" v-if="isMo">
                        <Button @click="doMenu" ghost>
                            <Icon type="ios-menu" color="white"/>
                        </Button>
                    </span>
                    <Row v-if="!isMo">
                        <Col span="3">
                            <router-link to="/" style="color: white; font-size: large">静心尽力写生活</router-link>
                        </Col>
                        <Col span="16" v-if="!isMo">
                            <div v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.nav">
                                <MenuItem v-for="(item2,index2) in item.children" :index="item2.path" :to="item2.path"
                                          v-if="item2.show" :name="item2.name" :key="item2.name">
                                    {{item2.name}}
                                </MenuItem>
                            </div>
                        </Col>
                        <Col span="5" v-if="!isMo">
                            <Button v-if="login==false" type="primary" @click="showLogin = true">
                                登录
                            </Button>
                            <Button v-if="login==false" style="margin-left: 8px" to="reg" target="_blank"
                                    ghost>
                                注册
                            </Button>
                            <Submenu name="9" v-if="login">
                                <template slot="title">
                                    <span style="color: white">{{now.name}}</span>
                                </template>
                                <MenuItem name="post" to="/do/post">投稿</MenuItem>
                                <MenuItem name="info" to="/do/info">个人中心</MenuItem>
                                <MenuItem name="admin" to="/admin" v-if="now.type == -1">后台</MenuItem>
                                <MenuItem name="out">登出</MenuItem>
                            </Submenu>
                        </Col>
                    </Row>
                </Menu>
            </Header>
            <Content>
                <Card dis-hover v-if="showMenu">
                    <center>
                        <div v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.nav">
                            <div v-for="(item2,index2) in item.children" v-if="item2.show" :key="item2.name">
                                <router-link :to="item2.path">
                                    <strong style="font-size: medium">{{item2.name}}</strong>
                                </router-link>
                            </div>
                            <div v-if="!login">
                                <Button type="text" @click="showLogin = true">
                                    <strong style="font-size: medium; color: dodgerblue">登录</strong>
                                </Button>
                                <Button type="text" to="reg">
                                    <strong style="font-size: medium; color: dodgerblue">注册</strong>
                                </Button>
                            </div>
                            <div v-if="login">
                                <Divider></Divider>
                                <strong style="font-size: medium; color: black">{{now.name}}</strong>
                                <br/>
                                <Button type="text" to="/do/post">
                                    <strong style="font-size: medium; color: dodgerblue">投稿</strong>
                                </Button>
                                <br/>
                                <Button type="text" to="/do/info">
                                    <strong style="font-size: medium; color: dodgerblue">个人中心</strong>
                                </Button>
                                <br/>
                                <Button type="text" to="/admin" v-if="now.type == -1">
                                    <strong style="font-size: medium; color: dodgerblue">后台</strong>
                                </Button>
                                <br/>
                                <Button type="text" @click="logout">
                                    <strong style="font-size: medium; color: dodgerblue">登出</strong>
                                </Button>
                            </div>
                        </div>
                    </center>
                </Card>
                <router-view></router-view>
            </Content>
            <Footer style="text-align: center;">
                纪中三鑫2018届26班29班 保留所有权利 <br/>
                由 26班 <a href="https://www.damanyang.cn" style="text-decoration: none" target="_blank">杨狄男</a> & <a
                    href="https://abalone.life" style="text-decoration: none" target="_blank">陈冠宇</a> 编写/设计
            </Footer>
        </Layout>
    </div>
</template>

<script>

    export default {
        name: "Index",

        created() {
            const that = this;
            axios.get('/getUser').then(function (resp) {
                that.now = resp.data;
                if (resp.data != '') {
                    that.login = true;
                }
            })
        },
        data() {
            return {
                showMenu: false,
                isMo: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                now: '',
                login: false,
                showLogin: false,
                form: {
                    name: '',
                    password: '',
                },
                rules: {
                    name: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {type: 'string', min: 4, message: '密码不能少于四位', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            doMenu() {
                if (this.showMenu==true) {
                    this.showMenu = false;
                }
                else {
                    this.showMenu = true;
                }
            },
            getSelect(p) {
                if (p == 'out') {
                    this.logout();
                }
            },
            logout() {
                axios.get('/logout').then(function (resp) {
                    location.reload();
                });
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        const that = this;
                        axios.post('/login', that.form).then(function (resp) {
                            if (resp.data) {
                                that.$Message.success('登录成功');
                                setTimeout("location.reload()", 500);
                            } else {
                                that.$Message.error('登录失败，用户名或密码错误');
                            }
                        });
                    } else {
                        this.$Message.error('请检查信息是否填写完整');
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>